<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        ul li{
            list-style: none;
        }
        .shop{
            border: 1px solid black;
            width: 477px;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
        }
        .shop .shop-list{
            padding:60px 100px;
        }
        .shop h1{
            font-weight: 200;
        }
        .shop p{
            font-size: 12px;
            padding: 10px 0;
        }
        .shop .shop-show{
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            position: relative;
            margin-top: 25px;
        }
        .shop .showcare {
            padding: 0 0 5% 22%;
             position:absolute;
             top: 0;
        }
        .showcare p{
            padding: 0;
        }
        .showimg{
            width: 45px;
            height: 45px;
        }
        .showcare .shop-title{
            font-family: Microsoft YaHei,微软雅黑,SimHei,黑体,PingFang SC,萍方,Noto Sans,Gill Sans,Gill Sans MT,Calibri,serif;
            font-size: 15px
        }
        .close{
            position: absolute;
            right: 0;
            top: 0;
            font-size: 25px;
            background-color: white;
            border: none;
        }
        .price{
            padding: .76923rem 0 0 28.28571%;;
            margin-top: 20px;
            
        }
        .ss{
            border: 1px solid #ccc;
            display: inline-block;
            width: 100px;
            text-align: center;
        }
        .ss button{
            background-color: white;
            border: none;
            font-size: 20px;
            line-height: 20px;
        }
        .sss{
            font-size: 15px;
            font-weight: 200;
            position: absolute;
            right: 0;
            margin-top: 5px;
        }

    </style>
</head>
<body>
       <div class="shop">
           <div class="shop-list">
               <h1>x 购物袋</h1>
               <p>您的购物袋里有1件商品</p>
               <div class="shop-show">
                 <div style="padding-top: 10px;margin-bottom: 10px;">
                    <img class="showimg" src="../img/4.jpg" alt="">
                    <div class="showcare">
                         <span class="shop-title">“金质马刺”提花宽袖衬衫</span> 
                         <p>颜色:黑色</p>     
                         <p>尺码：34</p>      
                         <p>货号:54564</p>
                    </div>
                    <div class="price">
                        <span class="ss">
                            <button style="float: left;">-</button>
                            <span>1</span>
                            <button style="float: right;">+</button>
                        </span>
                        <span class="sss">¥22,050.00</span>
                    </div>
                    <button class="close">X</button>
                 </div>
            </div>
           </div>
       </div>
</body>
</html>